<template>
    <div class="addBrand-container">
      <el-page-header @back="goBack" :content="content" style="margin-bottom:20px">
      </el-page-header>
    <div class="container">
      <el-form ref="ruleForm"
               :model="ruleForm"
               :inline="false"
               label-width="180px"
               class="demo-ruleForm">
        <el-form-item label="分类名称:"
                      prop="name">
          <el-input v-model="ruleForm.name"
                    placeholder="请输入分类名称"
                    maxlength="12" />
        </el-form-item>
        <el-form-item label="分类序号:"
                      prop="sort">
          <el-input v-model="ruleForm.sort"
                    placeholder="请输入分类序号"
                    maxlength="11" />
        </el-form-item>
        <el-form-item label="分类类型">
          <el-select v-model="ruleForm.type" placeholder="分类类型" >
            <el-option :label="type.name" :value="type.id" v-for="(type,index) in types" :key="index"></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <div class="subBox address">
          <!-- <el-form-item> -->
          <el-button @click="() => $router.push('/home/category')">
            取消
          </el-button>
          <el-button type="primary"
                     :class="{ continue: actionType === 'add' }"
                     @click="submitForm(actionType)">
            保存
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>


<script>
import {addCategory,updateCategory,queryCategoryById} from '@/api/category'
export default{
  data() {
    return {
      content:'添加分类',
      ruleForm:{
        name: '',
        id:'',
        type:'',
        sort:'',
        status:'',
      },
      rules:'',
      actionType:'',
      types:[
        {name:'商品',
        id:1},
        {name:'定制',
        id:2},
      ],
      user:null
    }
  },
  created(){
    let res;
    this.actionType = this.$route.query.methods
    if(this.actionType == 'add'){
      this.content='添加分类'
    }else{
      this.content='修改分类信息'
      console.log(this.$route.query.id)
      queryCategoryById(parseInt(this.$route.query.id)).then((res)=>{
        // this.ruleForm =  Object.assign(res.data) 
        
        console.log(res.data)
        //复制
        Object.keys(this.ruleForm).forEach(key => {
          this.ruleForm[key] = res.data[key] == undefined ? this.ruleForm[key] : res.data[key]
      })
      }).catch((err)=>{
        this.$message.error(err)
      })
      
    }

  },
  methods:{
    submitForm(value){
      console.log(this.ruleForm)
      let res;
      if(value == 'add'){
        res = addCategory(this.ruleForm)
        res.then((res)=>{
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.$router.push('/home/category')
        }).catch((err)=>{
          this.$message.error(err);
        })
      }
      else if(value == 'update'){
        console.log(value)
        console.log(this.ruleForm)
        res = updateCategory(this.ruleForm)
        res.then((res)=>{
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          console.log(res)
          this.$router.push('/home/category')
        }).catch((err)=>{
          console.log(err)
          this.$message.error(err);
        })
      }
    },
    goBack(){
      this.$router.go(-1)
    },
  }
}
</script>

<style lang="scss" scoped>
.addBrand {
  &-container {
    margin: 30px;
    margin-top: 0px;
    .HeadLable {
      background-color: transparent;
      margin-bottom: 0px;
      padding-left: 0px;
    }
    .container {
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 30px;
      border-radius: 4px;

    }
    .idNumber {
      margin-bottom: 39px;
    }

    .el-form-item {
      margin-bottom: 29px;
    }
    .el-input {
      width: 293px;
    }
  }
}

.demo-ruleForm{
  width: 600px;
}

.uploadImage{
  border-radius: 5px;
}
</style>